<!--
 * @Descripttion:
 * @Author: peter.pan
 * @Date: 2022-12-12 10:41:40
 * @LastEditors: peter.pan
 * @LastEditTime: 2022-12-12 12:05:08
-->
<template>
  <div>
    <div class="detail-container">
      <div class="detail-item-full">
        <div class="app-name">{{ appDetail.app.name || '暂无' }}</div>
      </div>
      <div class="detail-item">
        <div class="detail-title">服务简介</div>
        <div class="detail-content">{{ appDetail.app.description || '暂无' }}</div>
      </div>
      <div class="detail-item">
        <div class="detail-title">所属部门</div>
        <div class="detail-content">{{ appDetail.app.dept || '暂无' }}</div>
      </div>
      <div class="detail-item">
        <div class="detail-title">开发人员</div>
        <div class="detail-content">{{ appDetail.app.developer || '暂无' }}</div>
      </div>
      <div class="detail-item">
        <div class="detail-title">产品经理</div>
        <div class="detail-content">{{ appDetail.app.productManager || '暂无' }}</div>
      </div>
      <div class="detail-item">
        <div class="detail-title">测试人员</div>
        <div class="detail-content">{{ appDetail.app.tester || '暂无' }}</div>
      </div>
      <div class="detail-item">
        <div class="detail-title" style="border-bottom-left-radius: 4px;">更新时间</div>
        <div class="detail-content" style="border-bottom-right-radius: 4px;">{{ appDetail.app.updatedTime || '暂无' }}</div>
      </div>
    </div>

    <EditDetail ref="EditDetail" @updateSuccess="updateSuccessFn" />
  </div>
</template>

<script>
import { getAppDetail } from '@/api/app'
import EditDetail from './EditDetail.vue'

export default {
  components: { EditDetail },
  props: {
    mode: {
      type: String,
      default: 'all'
    }
  },
  data() {
    return {
      pageLoading: false,
      appName: this.$route.query.appName,
      appDetail: {
        app: {},
        machines: [],
        authRule: [],
        flowRule: [],
        metrics: []
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    openEdit() {
      this.$refs.EditDetail.openEdit(this.appDetail.app)
    },
    fetchData() {
      this.pageLoading = true
      getAppDetail({ appName: this.appName })
        .then((response) => {
          this.appDetail = response.data
          this.pageLoading = false
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    showDefault(val) {
      return val || '暂无'
    },
    updateSuccessFn() {
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;

    .detail-item-full {
        width: 100%;
    }

    .detail-item {
        width: 100%;
        display: flex;
        font-size: 14px;
    }

    .app-name {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 20px;
      font-weight: 500;
      padding: 24px 16px;
      color: #2d344b;
      background: #eaf0f6;
    }

    .detail-title {
        width: 128px;
        font-size: 14px;
        color: #2d344b;
        background: #f3f7fa;
        padding: 14px 16px;
        border-left: 1.5px solid #ecf2f9;
        border-right: 1.5px solid #ecf2f9;
        border-bottom: 1.5px solid #ecf2f9;
    }

    .detail-content {
        flex: 1;
        color: #2d344b;
        padding: 14px 18px;
        border-bottom: 1.5px solid #ecf2f9;
        border-right: 1.5px solid #ecf2f9
    }

    .edti-btn {
        position: absolute;
        right: 0;
        top: -40px;
    }
 }
</style>
